<template>
	<view class="box">
		<h1>uniapp</h1>
		<view class="row">11111</view>
		<text user-select selectable>node span</text>
		<text space="ensp" decode>vue &gt; js</text>
		
		<!-- 具体 scroll-view 标签使用参考文档：https://uniapp.dcloud.net.cn/component/scroll-view.html -->
		<!-- scroll-x 表示允许水平滑动，垂直滑动的话，把 x 换成 y -->
		<scroll-view class="scroll" scroll-x>
			<view class="group">
				<view class="item">
					111
				</view>
				<view class="item">
					111
				</view>
				<view class="item">
					111
				</view>
				<view class="item">
					111
				</view>
				<view class="item">
					111
				</view>
			</view>
		</scroll-view>
		
		<!-- 具体 swiper 标签使用参考：https://uniapp.dcloud.net.cn/component/swiper.html -->
		<!-- circular 表示滑动到最后，可以衔接到第一个重新滑动 -->
		<!-- autoplay 表示自动滑动，默认 5 秒钟   interval="3000" 表示修改成默认 3 秒钟滑动一次 -->
		<!-- duration="200" 表示滑动的动态速度 -->
		<!-- indicator-dots 表示显示轮播图的小点 -->
		<swiper class="swiper" circular autoplay interval="3000" duration="200" indicator-dots>
			<swiper-item class="item">
				<image src="../../static/images/1.jpg" mode=""></image>
			</swiper-item>
			<swiper-item class="item">
				<image src="../../static/images/2.jpg" mode=""></image>
			</swiper-item>
			<swiper-item class="item">
				<image src="../../static/images/3.jpg" mode=""></image>
			</swiper-item>
			<swiper-item class="item">
				<image src="../../static/images/4.jpg" mode=""></image>
			</swiper-item>
			<swiper-item class="item">
				<image src="../../static/images/5.jpg" mode=""></image>
			</swiper-item>
			<swiper-item class="item">
				<image src="../../static/images/6.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		
		<!-- 具体参考文档：https://uniapp.dcloud.net.cn/component/image.html -->
		
		<!-- image 标签带有默认的宽高，可能会导致图片变形 -->
		<image src="/static/images/1.jpg" mode="" class="myimage"></image>
		<!-- img 标签显示图片默认大小，可能会很大或很小 -->
		<!-- <img src="/static/images/1.jpg" alt="" /> -->
		
		
		<!-- 参考文档：https://uniapp.dcloud.net.cn/component/video.html -->
		
		<!-- initial-time 表示初始播放位置 -->
		<!-- controls 表示是否显示播放控件 -->
		<video src="../../static/video/2minute-demo.mp4" initial-time="20" controls></video>
		
		
		<!-- 具体参考文档：https://uniapp.dcloud.net.cn/component/navigator.html -->
		
		<!-- 如果不加 open-type="reLaunch" 的话，tabBar 配置了调整的该页面，就会让页面里 navigator 标签的功能失效 -->
		<navigator url="/pages/list/list" open-type="reLaunch">跳到新闻列表</navigator>
		<navigator url="/pages/list/list">
			<image src="../../static/logo.png" mode=""></image>
		</navigator>
		
		<view style="height: 200rpx; background: green;"></view>
	</view>
</template>

<!-- 不可以写 2 个 <template> 标签在最外层 -->

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx; // 750rpx 表示屏幕的宽度
		height: 200rpx;
		background: pink;

		h1 {
			font-size: 40px;
			color: red;

			.row {
				font-style: italic;
			}
		}
	}

	.scroll {
		border: 1px solid red;
		box-sizing: border-box;
		.group{
			white-space: nowrap;	// 设置不换行，自己的标签内容就不会换行了
			.item{
				width: 220rpx;
				height: 220rpx;
				background: royalblue;
				display: inline-block;
				margin: 10rpx;
			}
		}
	}
	
	.swiper{
		
	}
</style>